<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="../css/demo.css" type="text/css">
</head>
<body>
<div id="map">
</div>
<script src="../js/lib/ol4.6.4/ol.js"></script>
<script src="../js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var vector = new ol.layer.Vector({
        source: null,
        style: styleFunction
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w"),
            vector
        ],
        view: view
    });

    $.get("capital/all", function (result) {
        var features = [];
        for(var i=0,len=result.data.length;i<len;i++){
            var _r = result.data[i],
                coord = ol.proj.transform([_r.lon, _r.lat], "EPSG:4326", "EPSG:3857");
            var feature = new ol.Feature({
                geometry: new ol.geom.Point(coord),
                name:_r.name
            });
            features.push(feature);
        }
        var source = new ol.source.Vector({
            features: features
        });
        vector.setSource(source);

        map.on('pointermove', function(evt) {
            if(map.hasFeatureAtPixel(evt.pixel)){
                $(map.getTargetElement()).css("cursor", "pointer");
                map.forEachFeatureAtPixel(evt.pixel, function (features) {
                    console.log(features);
                    var name = features.get("name");
                    console.log(name);
                });
            }else{
                $(map.getTargetElement()).css("cursor", "default");
            }
        });
    });

    function styleFunction(feature) {
        var stroke = new ol.style.Stroke({
            color: 'black',
            width: 2
        });
        var fill = new ol.style.Fill({
            color: 'red'
        });
        var _name = feature.get("name");
        var _radius = 6,
            _radius2 = 6;
        if(_name==="北京"){
            _radius = 8;
            _radius2 = 4;
        }
        return new ol.style.Style({
            stroke:stroke,
            fill: fill,
            image: new ol.style.RegularShape({
                fill: fill,
                stroke: stroke,
                points: 5,
                radius: _radius,
                radius2: _radius2,
                angle: 0
            })
        });
    }

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}&tk=16c5722fed64bcdbb390cc21a5548cf9";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>
